<template>
    <a-drawer
        :title="props.title"
        :width="props.width"
        v-model:visible="isShowDetailDrawer"
        placement="right"
        :closable="false"
        destroyOnClose="true"
    >
        <template #extra>
            <!-- <span class="mr-30" @click="openDeleteDialog" style="cursor: pointer;">
                <BaseIcon type="delete"  class="btn" />
            </span> -->
            <span @click="closeDetailDrawer" style="cursor: pointer;">
                <BaseIcon type="close"  class="btn" />
            </span>
        </template>
        <slot></slot>
    </a-drawer>
</template>

<script setup lang='ts'>
import appStore from '@/store';
const props = defineProps({
    title: {
        type: String,
        default: '标题',
    },
    interfaceType: {
        type: String,
        default: '',
    },
    interfaceName: {
        type: String,
        default: ''
    },
    width: {
        type: String,
        default: '800'
    }
});
const { isShowDetailDrawer } = storeToRefs(appStore.useCommonStore);
const { staffDetailRef  } = storeToRefs(appStore.useStaffStore);
onMounted(() => {});
// 打开删除对话框
const openDeleteDialog = () => {

}
// 关闭详情抽屉
const closeDetailDrawer = () => {
    isShowDetailDrawer.value = false;
    staffDetailRef.value = null;
}
</script>

<style  lang='less' scoped>
.btn {
    width: 20px;
    height: 20px;
    margin-right: 20px;
}
.anticon-delete {
    margin-right: 20px;
}
.mr-30 {
    margin-right: 30px;
}
</style>